<template>
	<view class="backColWhite pt30r pb2r">
		<view class="backColWhite borRad10r bor1S99c043 p20r mb50r poRel" :key="item2.id"
			@click.stop="cliRoomFun(item2)" v-for="(item2, index2) in roomList"
		>
			<view class="disFlex">
				<view class="w150r h150r poRel borRad10r overHid">
					<image :src="item2.picZero" mode="aspectFill"
						class="wPer100 hPer100"
						@click.stop="cliRoomImg(item2.pic)"
					></image>
					<view :class="['poAbs', 'left0', 'bom0', 'wPer100', 'teAliCenter', 'f24r', 'boSiBorBox', 'h40r',
							item2.is_idle == 1 ? 'lh40r colFff backImgLiGrTR2c6739a99c043' : 'col999 backColWhite bor2S99c043'
						]"
					>
						<image src="../static/icons/iconClockGray.png" mode="aspectFit"
							class="w25r h25r poRel top2s5r" v-if="item2.is_idle != 1"
						></image>
						{{
							item2.is_idle == 1 ? '空闲' :
							item2.is_idle == 2 ? '使用中' :
							item2.is_idle == 3 ? '待保洁' : item2.is_idle
						}}
					</view>
				</view>
				<view class="flex1 pl20r">
					<view class="f28r foWeiBold webLiCl1 webBoxOrVer overHid disWebBox mb10r">
						{{item2.name}}
					</view>
					<view class="f24r">
						<view class="disInBlo wPer50 colFf3627">
							会员¥{{item2.vip_price}}/小时
						</view>
						<view class="disInBlo wPer50 col999">
							原价¥{{item2.price}}/小时
						</view>
					</view>
					<view class="disFlex aliItCenter mt10r">
						<view class="w150r">
							<view class="disInBlo lh40r pr10r borRad5r f20r col999">
								{{item2.people_count}}人使用
							</view>
						</view>
						<view class="flex1 teAliRight foWei500">
							<view class="w150r col99c043 teAliCenter lh57r borRad10r bor1S99c043 disInBlo boSiBorBox"
								@click.stop="cliAdvanceReservation(item2.tid, item2.id, item2.hour, item2.set_meal_type, item2.card_discount, item2.price)"
							>
								提前预订
							</view>
							<view class="w150r colFff teAliCenter lh60r borRad10r backCol99c043 disInBlo ml20r"
								@click.stop="cliUseNow(item2.tid, item2.id, item2.hour, item2.set_meal_type, item2.card_discount, item2.price)"
							>
								马上使用
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="f24r colFff backImgLiGrTR2c6739a99c043 poAbs topn24r left20r pl20r pr20r lh40r borBRRad44r borTLRad5 borBLRad5">
				{{item2.hour}}小时起订
			</view>
			<progressBar :progressObj="{tid: item2.tid, rid: item2.id}"
			></progressBar>
		</view>
	</view>
</template>
<script>
import progressBar from '@/components/progressBar.vue'
import { baseUrl, imgNetUrl } from '@/utils/request.js'
export default {
	components: { progressBar },
	props: {
		roomList: { type: Array, default: [] }
	},
	data() {
		return {
			baseUrl,
		}
	},
	mounted() {
		if(this.roomList.length) {
			this.roomList.forEach(item => {
				item.vip_price = Math.round(Number(item.card_discount) * Number(item.price) * 100) / 100;
				if(item.pic && item.pic != '') {
					item.picZero = imgNetUrl + item.pic.split(',')[0];
				}else {
					item.picZero = '/static/images/logo.png';
				}
			})
		}
	},
	methods: {
		cliRoomFun(item2) {
			delete item2.remarks;
			uni.navigateTo({
				url: '/pages/index/roomDetail?item=' + JSON.stringify(item2)
			})
		},
		cliRoomImg(item2Pic) {
			let urls = [];
			if(item2Pic) {
				item2Pic.split(',').forEach(item => {
					urls.push(imgNetUrl + item)
				})
			}else {
				urls = ['/static/images/logo.png'];
			}
			uni.previewImage({ current: 0, urls })
		},
		cliUseNow(tid, rid, hour, set_meal_type, card_discount, price) {//马上使用
			if(uni.getStorageSync('token')) {
				if(set_meal_type == 1) {
					uni.showToast({ title: '必购套餐，请进房间选择', icon: 'none', duration: 3000 })
				}else {
					this.$emit('cliUseNow', tid, rid, hour, card_discount, price);
				}
			}else {
				uni.navigateTo({ url: '/pages/personalCenter/login?type=2' })
			}
		},
		cliAdvanceReservation(tid, rid, hour, set_meal_type, card_discount, price) {
			if(uni.getStorageSync('token')) {
				if(set_meal_type == 1) {
					uni.showToast({ title: '必购套餐，请进房间选择', icon: 'none', duration: 3000 })
				}else {
					this.$emit('cliAdvanceReservation', tid, rid, hour, card_discount, price);
				}
			}else {
				uni.navigateTo({ url: '/pages/personalCenter/login?type=2' })
			}
		},
	}
}
</script>
<style>
</style>